<template>
  <!-- 项目基本信息 -->
  <Projec ref="projecRef" />
  <!-- 征信基本信息 -->
  <Credit ref="creditRef" />

  <div class="footer">
    <el-button @click="handleClose">返回上一步</el-button>
    <el-button @click="handleConfirm">保存</el-button>
    <el-button type="danger" @click="handleConfirm">提交</el-button>
  </div>
</template>

<script setup>
// 项目基本信息
import Projec from './components/projec.vue'
// 征信基本信息
import Credit from './components/credit.vue'

const router = useRouter()
// 返回上一步
function handleClose() {
  router.replace({
    path: '/',
    state: {
      open: false,
    },
    // 重新触发导航
    force: true
  })
}


const projecRef = ref(null) // 项目基本信息
const creditRef = ref(null) // 征信基本信息
// 整体校验
const handleValidate = () => {
  // 项目基本信息校验
  const v1 = new Promise((resolve, reject) => {
    projecRef.value.validateForm()
    .then(data=>{
      resolve(data)
    })
  })
  // 征信基本信息校验
  const v2 = new Promise((resolve, reject) => {
    creditRef.value.validateForm()
    .then(data=>{
      resolve(data)
    })
  })

  // 全部校验完成，返回数据
  return Promise.all([v1, v2])
  .then(res => {
    console.log(res, '全部校验完成')
    return res.reduce((acc, obj) => {
      Object.assign(acc, obj)
      return acc
    }, {});
  })
}


// 设置当前步骤状态
const setStatus = inject('setStatus')
// 保存/提交
function handleConfirm() {
  // handleValidate()
  // .then(res=>{
  //   console.log(res,333)
  // })
  // 设置状态
  setStatus('finish')
}
</script>

<style lang="scss" scoped>
.card{
  & + &{
    margin-top: 15px;
  }
  :deep(.el-form){
    margin-top: 20px;
    .el-row{
      .el-form-item {
        flex: 1;
        & + .el-form-item{
          margin-left: 20px;
        }
      }
    }
  }
}

.footer{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
